<template>
  <div>
    {{ msg }}
  </div>

  <div v-for="item in list" :key="item.id">
    {{ item.id }} --- {{ item.name }}
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';


const msg = ref<number>(0)


type Todo = { id: number, name: string }[]
const list = ref<Todo>([
  {
    id: 1,
    name: 'test'
  },
  {
    id: 2,
    name: 'test2'
  }
])

// 计算属性 ==> 在绝大多数的时候，都不需要手动指定类型，会类型推断
const leftCount = computed(() => {
  return list.value.length
})

// 事件类型
const handleClick = (e: MouseEvent) => {
  console.log(e.pageX, e.pageY)
}


</script>
